<template>
	<z-paging ref="paging" v-model="customerList" @query="queryList" :empty-view-center="false" :hide-no-more-by-limit="10">
		<template v-slot:top></template>
		<view class="customer-list-container">
			<!-- 客户卡片列表 -->
			<view class="card-list">
				<view v-for="item in customerList" :key="item.customerId" class="card-item" @click="goHistory(item)">
					<view class="card-header">
						<view class="card-left">
							<text class="customer-name">{{ item.customerName }}</text>
						</view>
						<view class="card-footer">
							<u-button type="primary" size="mini" @click.stop="onEdit(item)">管理档案</u-button>
							<u-button type="primary" size="mini" @click.stop="onChange(item)">绑定业务员</u-button>
							<u-button type="error" size="mini" @click.stop="onDel(item)">删除</u-button>
						</view>
					</view>

					<view class="card-body">
						<view class="info-row">
							<uni-icons type="phone" size="14" color="#999" />
							<text class="info-text">{{ item.customerPhone || '未填写' }}</text>
						</view>

						<view class="info-row">
							<uni-icons type="location" size="14" color="#999" />
							<text class="info-text">{{ item.contactAddress || '未填写' }}</text>
						</view>

						<view v-if="item.customerSource" class="info-row">
							<uni-icons type="shop" size="14" color="#999" />
							<text class="info-text">来源：{{ formatSource(item.customerSource) }}</text>
						</view>

						<!--   -->
						<view v-if="item.customerSource" class="info-row">
							<uni-icons type="shop" size="14" color="#999" />
							<text class="info-text">
								平台订单：
								<u-tag :text="`${item.sysCount || '0'}单`" size="mini" />
							</text>
							<text class="info-text">
								复购订单：
								<u-tag :text="`${item.reCount || '0'}单`" type="success" size="mini" />
							</text>
						</view>

						<view v-if="item.salesman" class="info-row">
							<uni-icons type="auth" size="14" color="#999" />
							<text class="info-text">所属业务：{{ item.salesman.salesmanName }}</text>
						</view>

						<view v-if="item.remark" class="info-row remark-row">
							<uni-icons type="compose" size="14" color="#999" />
							<text class="remark-text">{{ item.remark }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<template v-slot:bottom>
			<view class="bottom-footer">
				<button class="btn-primary" @click="onAdd">
					<view class="bottom-content">
						<uni-icons type="plusempty" color="#fff" size="16" />
						添加客户
					</view>
				</button>
			</view>
		</template>
	</z-paging>
</template>

<script setup lang="ts">
import { onLoad, onUnload } from '@dcloudio/uni-app';
import { ref, reactive, computed } from 'vue';
import { listCustomer } from '@/api/customers/index.js';
import { navTo } from '@/common/utils.js';

// 模拟数据（实际从 API 获取）
const customerList = ref();
const selections = ref<any[]>([]);
const paging = ref(null);

const queryList = (pageNum, pageSize) => {
	listCustomer({
		pageNum,
		pageSize
	}).then((res) => {
		paging.value.complete(res.rows);
	});
};

// 搜索字段（模拟）
const extraField = [];
const columnsValues = [];

const formatSource = (val: string) => {
	const map: Record<string, string> = {
		baidu: '线上推广',
		线下渠道: '线下渠道',
		转介绍: '转介绍'
	};
	return map[val] || val;
};

// 搜索
const onSubmit = (data: any) => {
	console.log('搜索条件:', data);
	// 调用接口
};

// 添加客户
const onAdd = () => {
	uni.navigateTo({
		url: '/pages/customer/add'
	});
};

const goHistory = (row: any) => {
	navTo({
		url: '/pages/customerHistory/customerHistory',
		_params: {
			customerId: row.customerId
		}
	});
};

// 编辑客户
const onEdit = (row: any) => {
	navTo({
		url: '/pages/customer/add',
		_params: row
	});
};

// 换绑业务员
const onChange = (row: any) => {
	navTo({
		url: '/pages/customer/change-salesman',
		_params: { id: row.customerId }
	});
};

// 刷新
const relaod = () => {
	paging.value.reload();
};

// 删除客户
const onDel = (row: any) => {
	uni.showModal({
		title: '提示',
		content: '确定删除该客户吗？',
		success: (res) => {
			if (res.confirm) {
				customerList.value = customerList.value.filter((item) => item.customerId !== row.customerId);
				uni.showToast({ title: '删除成功' });
			}
		}
	});
};

//
onLoad(() => {
	uni.$on('saveok', relaod);
});

onUnload(() => {
	uni.$on('saveok', relaod);
});
</script>

<style lang="scss" scoped>
.customer-list-container {
	padding: 20px;
	background-color: #f5f7fa;
	min-height: 100vh;
}

.search-card {
	background: #fff;
	padding: 20px;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
	margin-bottom: 20px;
}

.toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 16px;
}

.bottom-footer {
	margin: 20rpx;

	.bottom-content {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 10;
	}
}

.btn-primary {
	background: linear-gradient(135deg, #4361ee 0%, #3a56d4 100%);
	color: white;
	border: none;
	padding: 5rpx;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	display: flex;
	align-items: center;
	color: #fff;
}

.btn-primary:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(67, 97, 238, 0.3);
}

.selection-alert {
	background: #e3f2fd;
	color: #1976d2;
	padding: 10px 16px;
	border-radius: 8px;
	font-size: 14px;
	margin-bottom: 16px;
	text-align: center;
}

.card-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 16px;
}

.card-item {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	transition: all 0.3s ease;
	border: 2px solid transparent;
}

.card-item.selected {
	border-color: #4361ee;
	box-shadow: 0 8px 20px rgba(67, 97, 238, 0.15);
}

.card-header {
	padding: 16rpx 16rpx 12rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #eee;

	.card-left {
		display: flex;
		align-items: center;
		gap: 8px;
	}
}

.customer-name {
	font-weight: 600;
	font-size: 16px;
	color: #111;
}

.status-tag {
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 6px;
	background: #4cc985;
	color: white;
}

.status-inactive {
	background: #ff7675;
}

.card-body {
	padding: 14px 16px;
	color: #555;
	font-size: 14px;
}

.info-row {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	line-height: 1.5;
}

.info-text {
	margin-left: 6px;
	color: #555;
}

.remark-row {
	color: #777;
}

.remark-text {
	font-style: italic;
}

.card-footer {
	padding: 12px 16px;
	display: flex;
	gap: 8px;

	.card-btn {
		height: 50rpx;
		display: flex;
		flex: 1;
		background-color: #1976d2;
	}

	.btn-del {
	}
}

.action-btn {
	flex: 1;
	padding: 8px 0;
	font-size: 13px;
	border-radius: 6px;
	text-align: center;
	background: #f1f3f5;
	color: #333;
	border: none;
}

.action-btn:hover {
	background: #e9ecef;
}

.action-btn.danger {
	background: #ff7675;
	color: white;
}

.action-btn.danger:hover {
	background: #ff6b6b;
}

.pagination {
	margin-top: 30px;
	display: flex;
	justify-content: center;
}
</style>
